<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '课程',
  },
}
</route>
<template>
  <view class="course-main">
    <!-- 顶部搜索栏 -->
    <view class="search-box">
      <wd-input
        v-model="searchValue"
        placeholder="输入课程名称"
        class="rounded-full pl-30rpx"
        clearable
        no-border
      >
        <template #suffix>
          <wd-button type="primary" size="small" class="search-btn ml-8rpx" @click="onSearch">
            搜索
          </wd-button>
        </template>
      </wd-input>
    </view>
    <view class="course-list">
      <!-- 骨架屏 -->
      <template v-if="loading && pageNum === 1">
        <wd-skeleton :row="3" animated />
      </template>
      <template v-else>
        <view
          v-for="(course, index) in courseList"
          :key="course.id || index"
          class="course-item transition-all duration-300 hover:translate-y-[-4px]"
        >
          <image
            :src="course.cover"
            mode="aspectFill"
            lazy-load
            class="course-image rounded-t-lg"
          />
          <view class="course-info">
            <view class="course-title">{{ course.name }}</view>
            <view class="course-school ellipsis-2">{{ course.content }}</view>
            <view class="course-progress">已学习{{ course.learnedProgress }}%</view>
          </view>
          <wd-button
            class="course-study"
            :round="false"
            plain
            size="small"
            @click="goToStudy(course)"
          >
            去学习
          </wd-button>
        </view>
      </template>

      <!-- 添加加载状态和加载完成的提示 -->
      <wd-loadmore :state="state" @reload="loadMore" finished-text="已经全部加载完毕"></wd-loadmore>
    </view>
  </view>
</template>

<script setup lang="ts">
import { selectLessonList } from '@/service/edu/lesson/lessonMain'
import { ref } from 'vue'

// 搜索相关
const searchValue = ref('')

// 修改状态管理
const state = ref<'loading' | 'finished' | 'error'>('loading')
// 分页相关

const pageNum = ref(1)
const pageSize = ref(10)

const loading = ref(false)
const finished = ref(false)

// 课程列表数据
const courseList = ref<any[]>([])

// 获取课程列表数据的方法
async function getInfoList(isLoadMore = false) {
  if (loading.value || (finished.value && isLoadMore)) return
  try {
    loading.value = true
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      content: searchValue.value,
    }

    const data: any = await selectLessonList(params)
    if (data?.code === 200) {
      const { rows = [], total = 0 } = data || {}

      if (isLoadMore) {
        courseList.value = [...courseList.value, ...rows]
      } else {
        courseList.value = rows
      }

      // 判断是否加载完所有数据
      finished.value = courseList.value.length >= total
      state.value = finished.value ? 'finished' : 'loading'
    }
  } catch (error) {
    console.error('获取课程列表失败:', error)
    state.value = 'error'
  } finally {
    loading.value = false
  }
}

// 搜索方法
const onSearch = async () => {
  pageNum.value = 1
  finished.value = false
  state.value = 'loading'
  await getInfoList(false)
}

// 加载更多数据
const loadMore = async () => {
  if (!loading.value && !finished.value) {
    pageNum.value++
    await getInfoList(true)
  }
}

// 页面加载时获取数据
onLoad(async () => {
  await getInfoList(false)
})

// 监听页面滚动到底部
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

const goToStudy = (course: any) => {
  uni.navigateTo({
    url: `/pages/course/detail?id=${course.id}`,
  })
}
</script>

<style lang="scss" scoped>
.course-main {
  padding: 24rpx;
}
.search-box {
  height: 70rpx;
  border: 1rpx solid #3670f7;
  border-radius: 999px;
  :deep(.wd-input__inner) {
    height: 70rpx;
    background-color: white;
    border-radius: 999px;
  }
  :deep(.wd-input__suffix) {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding-right: 6rpx;
    font-size: 28rpx;
  }
}
:deep(.wd-divider) {
  justify-content: center;
  margin: 0;
}
:deep(.wd-divider::before) {
  display: none;
}
:deep(.wd-divider::after) {
  display: none;
}

// 课程列表
.course-list {
  overflow-y: auto;
  .course-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;

    .course-image {
      width: 210rpx;
      height: 146rpx;
      margin-right: 35rpx;
      border-radius: 10rpx;
    }

    .course-info {
      flex: 1;
      .course-title {
        margin-bottom: 5rpx;
        font-size: 30rpx;
        font-weight: bold;
      }

      .course-school {
        margin-bottom: 30rpx;
        font-size: 26rpx;
        color: #999999;
      }
      .course-progress {
        font-size: 24rpx;
        font-weight: bolder;
      }
    }
    .course-study {
      align-self: self-end;
      font-size: 26rpx;
      border-radius: 8rpx;
    }
  }
}
</style>
